<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  props:{
    progress:{
      type:Number,
      required:true
    },
    width:{
      type:Number,
      default:20
    },
    height:{
      type:Number,
      default:1
    },
    backgroundColor:{
      type:String,
      default:'#ffffff'
    },
    fillColor:{
      type:String,
      default:'#0099CC'
    }
  },
  computed:{
    progressStyle(){
      return {
        width:this.width+'em',
        height:this.height+'em',
        backgroundColor:this.backgroundColor
      };
    },
    fillStyle(){
      return {
        width:this.progress+'%',
        height:this.height+'em',
        backgroundColor:this.fillColor
      }
    }
  }
})
</script>

<template>
  <div class="progressbar" :style="progressStyle">
    <div class="progressbar-fill" :style="fillStyle"></div>
  </div>
</template>

<style scoped>
.progressbar{
  display: inline-block;
  border-radius: 4px;
}
.progressbar-fill{
  display: inline-block;
  transition: width 0.5s;
}
</style>